<template lang="">
  <t-dialog
    :visible="props.visibles"
    width="40%"
    header="新增Waterquality_app"
    :confirm-loading="submitLoading"
    :destroy-on-close="true"
    @confirm="handleOnConfirm"
    @cancel="handleClose"
    @close="handleClose"
  >
    <t-form ref="form" :data="formData" :rules="rules">
      <t-form-item label="应用名称" name="name">
      <t-input v-model="formData.name" placeholder="请输入应用名称"></t-input>
    </t-form-item>
      <t-form-item label="应用路径" name="path">
      <t-input v-model="formData.path" placeholder="请输入应用路径"></t-input>
    </t-form-item>
      <t-form-item label="应用图标" name="icon">
      <t-input v-model="formData.icon" placeholder="请输入应用图标"></t-input>
    </t-form-item>
      <t-form-item label="是否隐藏" name="hidden">
      <t-input v-model="formData.hidden" placeholder="请输入是否隐藏"></t-input>
    </t-form-item>
      <t-form-item label="是否禁用" name="disabled">
      <t-input v-model="formData.disabled" placeholder="请输入是否禁用"></t-input>
    </t-form-item>
      </t-form>
  </t-dialog>
</template>
<script lang="ts" setup>
import { MessagePlugin } from 'tdesign-vue-next';
import { onMounted, reactive, ref } from 'vue';

import {getList, getInfo, doDelete, doUpdate, doCreate } from '@/api/platform/waterquality/app';

const props = defineProps({
  visibles: {
    type: Boolean,
    default: false,
  },
});
const INITIAL_DATA = {
        name: '',
        path: '',
        icon: '',
        hidden: '',
        disabled: '',
  };
const form = ref();
const submitLoading = ref(false);
const formData: any = reactive({
  ...INITIAL_DATA,
});
const rules = reactive({
        name: [
      {
        required: true,
        message: '应用名称必填',
        type: 'error',
        trigger: 'blur',
      },],
        path: [
      {
        required: true,
        message: '应用路径必填',
        type: 'error',
        trigger: 'blur',
      },],
        icon: [
      {
        required: true,
        message: '应用图标必填',
        type: 'error',
        trigger: 'blur',
      },],
        hidden: [
      {
        required: true,
        message: '是否隐藏必填',
        type: 'error',
        trigger: 'blur',
      },],
        disabled: [
      {
        required: true,
        message: '是否禁用必填',
        type: 'error',
        trigger: 'blur',
      },],
  });
onMounted(() => {
});
const emit = defineEmits(['update:visibles', 'success']);

const handleOnConfirm = () => {
  form.value.validate().then((validateResult: any) => {
    if (validateResult === true) {
      submitLoading.value = true;
      doCreate({
        ...formData,
      }).then(() => {
        submitLoading.value = false;
        MessagePlugin.success('新增Waterquality_app成功');
        form.value.clearValidate();
        form.value.reset();
        handleClose();
        emit('success');
      });
    } else {
      MessagePlugin.error('表单验证失败');
    }
  });
};

const handleClose = () => {
  emit('update:visibles', false);
};
</script>
<style lang="less" scoped></style>
